<template>
  <el-row class="detail-comment">
    <h4>评论</h4>
    <el-tag
      class="reply-tag"
      type="info"
      closable
      @close="cancelReply"
    >
      回复 @{{  }}
    </el-tag>
    <el-input
      class="detail-comment-input"
      type="textarea"
      :rows="2"
      resize="none"
      placeholder="说点什么吧..."
    />
    <el-row class="detail-comment-ctrl" type="flex" justify="space-between">
      <div class="detail-comment-ctrl__pics">
        <el-upload
          list-type="picture-card"
          name="files"
          ref="picUploader"
          :action="uploadURL"
          :on-preview="handlePictureCardPreview"
          :on-remove="handlePicRemove"
          :on-error="uploadPicError"
          :on-success="uploadPicSuccess">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="image preview">
        </el-dialog>
      </div>
      <div>
        <el-button
          type="primary"
          size="small"
          @click="postComment"
          :loading="isPosting"
        >提交</el-button>
      </div>
    </el-row>
    <div
      class="detail-comment-empty"
    >暂无评论，赶紧抢占沙发！</div>
     <UserComment
      :CommetContents="CommetContents"
    />
    <el-row
      class="detail-comment-pagination"
      type="flex"
      justify="center"
      align="middle"
    >
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-sizes="[5, 6, 7, 8]"
        :page-size="pageSize"
        :total="totalPage"
      />
    </el-row>
  </el-row>
</template>

<script>
import {PostCommentUser} from '@/utils/apis/post'
import UserComment from '@/components/post/comment/UserComment'
export default {
  data(){
    return{
      CommetContents:[],//接受
      CommetContent://传输
      {
        content: '',
        pics: [],
        follow: '',
        post: this.$route.query.id
        },
      replyUsername: '',
      dialogImageUrl: '',
      dialogVisible: false,
      isPosting: false,
      currentPage: 1,
      pageSize: 5,
      totalPage: 0
    }
  },
    methods: {
    cancelReply(){},
    postComment(){},
    // 图片上传
    uploadPicSuccess (resData) {
    const files = resData.map(v => {
      v.url = this.baseURL + v.url
      return v
    })
    // 上传成功后将响应文件对象存储下来
    this.CommetContent.pics.push(...files)
    },
    uploadPicError(){
      this.$message.error('上传文件失败')
      },
    handlePicRemove(file){
       const pics = this.CommetContent.pics
      const delIndex = pics.findIndex(v =>
        v.id === file.response[0].id
      )
      pics.splice(delIndex, 1)
    },
    handlePictureCardPreview(file){
    this.dialogImageUrl = file.url
    this.dialogVisible = true
    },
    },
   async mounted(){
    const userconten = this.$route.query.id
    let res = await PostCommentUser({userconten})
    console.log(res)
    this.CommetContent = res.data
    console.log(this.CommetContent )
    },
    computed: {
    baseURL() {
      return this.$axios.defaults.baseURL
    },
    uploadURL () {
      return this.baseURL + '/upload'
    }
  },
  components:{
    UserComment
  }
}
</script>

<style lang="less" scoped>
.detail-comment {
  h4 {
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 400;
  }
  .detail-comment-input {
    margin-bottom: 10px;
  }
  .detail-comment-ctrl {
    margin-bottom: 30px;
    .detail-comment-ctrl__pics ::v-deep {
      .el-upload {
        width:100px;
        height:100px;
        line-height:100px;

       .el-upload-list__item {
          width:100px;
          height:100px;
        }
      }
    }
  }
  .detail-comment-pagination {
    margin-top: 10px;
  }
  .detail-comment-empty {
    padding: 30px 0;
    text-align: center;
    font-size: 14px;
    border: 1px dashed #ddd;
    color: #999;
  }
  .reply-tag {
    margin-bottom: 10px;
  }
}
</style>
